<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>收货地址</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/City.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/order.css" />
</head>          
<body>
    <div class="page-group ms-controller" :controller="newaddress">
        <div class="page page-current">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left" href="javascript:window.history.go(-1)"></a>
                <a class="icon icon-home pull-right" href="/H5"></a>
                <h1 class="title">添加新的收货地址</h1>
            </header>
            <div class="content">
                <div class="list-block" style="margin-top:0">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">收货人</div>
                                    <div class="item-input">
                                        <input type="text" :duplex="@user" placeholder="收件人姓名">
                                    </div>
                              </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">手机号码</div>
                                    <div class="item-input">
                                        <input type="text" :duplex="@phone" placeholder="收货人联系号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">选择地址</div>
                                    <div class="item-input">
                                        <input type="text" readonly placeholder="选择地址" id="picker" :duplex="@ssq">
                                        <input type="hidden" name='location' id="value">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input">
                                        <input type="text" :duplex="@detail" placeholder="详细地址" value="" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">粘贴地址</div>
                                    <div class="item-input">
                                        <textarea :duplex="@copy" placeholder="粘贴整段地址，自动识别姓名、电话和地址。例：小薇13800000000 广东省广州市天河区某某街道0001号" id="copy" :on-change="@getMsg">

                                        </textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">设为默认</div>
                                    <div class="item-input">
                                        <label class="label-switch">
                                            <input class="default" type="checkbox">
                                            <div class="checkbox"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <button :on-click="@add" class="address_btn">确 定</button>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/City.js' charset='utf-8'></script>
<script>
    var newAddress = avalon.define({
        $id: "newaddress",
        user: "",
        phone: "",
        detail: "",
        copy:'',
        msg:'',
        ssq:'',
        ssqId:'',
        back: function(){
            window.history.go(-1)
        },
        getCity: function(){
            Mall.request("/api/AreaDict")
                .always( function( data ){
                    if( data.error_code == 0 ){
                        var area = new LArea();
                        area.init({
                            'trigger': '#picker', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
                            'valueTo': '#value', //选择完毕后id属性输出到该位置
                            'keys': {
                                id: 'id',
                                name: 'name'
                            }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
                            'type': 1, //数据源类型
                            'data': data.data //数据源
                        });
                    }
                } )
        },
        getMsg: function(){
            newAddress.copy = $("#copy").val();
            Mall.request("/api/AddressMatch",{content:newAddress.copy})
                .always( function( data ){
                    if( data.error_code == 0 ){
                        newAddress.user = data.data.name;
                        newAddress.phone = data.data.mobile;
                        newAddress.detail = data.data.address;
                        newAddress.ssq = data.data.province+','+data.data.city+','+data.data.area;
                        newAddress.ssqId = data.data.province_id+','+data.data.city_id+','+data.data.area_id;
                    }
                } )
        },
        add:function(){
            var msg = "";
            if( Mall.LOCK ){
                return
            }
            if( !newAddress.detail ){
                msg = "请填写详细地址"
            }
            if( !$("#value").val()&&!newAddress.ssqId){
                msg = "请选择地区"
            }
            if( !newAddress.user ){
                msg = "请输入收件人姓名"
            }
            if( msg ){
                $.toast( msg, 2000, "warning" );
                return
            }
            var postData = {
                name: newAddress.user,
                mobile: newAddress.phone,
                area: $("#value").val(),
                address: newAddress.detail,
                is_default: $( ".default" ).is(':checked')?1:0 
            }
            if(newAddress.ssqId){
                postData.area = newAddress.ssqId;
            }
            Mall.LOCK = true;
            Mall.request( "/api/AddressSubmit", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                        var url = window.location.href;
                        $.toast( "添加成功", 1000, "success", function(){
                            if( url.indexOf( "?jumpurl=" ) > -1 ){
                                window.location.href = url.split( "?jumpurl=" )[1]
                            }
                            else{
                                window.history.go(-1);
                            }
                        } );
                    }
                    Mall.LOCK = false;
                } )
        }
    })
    newAddress.getCity();
    avalon.scan( document.body );
</script>
</body>
</html>
